import React from "react";
import { useSelector, useDispatch } from "react-redux";

import List from "./List";

const App = () => {
  // 如果同时使用了immutable和模块化，需要使用getIn
  const count = useSelector((state) => state.getIn(["counter", "count"]));
  const name = useSelector((state) => state.getIn(["counter", "name"]));
  const dispatch = useDispatch();

  return (
    <>
      <h2>redux结合immutable</h2>
      <span>{count}</span>
      <button onClick={() => dispatch({ type: "addAction" })}>+</button>

      <hr />

      <p>{name}</p>
      <button onClick={() => dispatch({ type: "changeName" })}>btn</button>

      <hr />

      <List />
    </>
  );
};

export default App;
